<!--
@BLINK-ALLOW:offscreen
@AURALINUX-ALLOW:visible
@WAIT-FOR:doneActivating
-->
<div>
  <div id="initialSpacer" style="height: 10000px;">
    initial spacer, will initially make everything below this far away from the viewport
  </div>
  <div id="inViewport" style="content-visibility: auto">
    This text will get viewport-activated because it's in the viewport, and will be in AX tree with layout.
  </div>
  <div id="alsoInViewport" style="content-visibility: auto">
    This text is also in viewport.
  </div>
  <div style="height: 10000px;">
    spacer so that everything below will be offscreen (and won't get viewport-activated)
  </div>
  <div id="wayBelowViewport" style="content-visibility: auto">
    This text will not get viewport-activated, and will be in AX tree but without layout.
  </div>
  <div id="statusDiv"></div>
</div>
<script>
  // Viewport activation happens on the next frame, so we'll wait until then before ending.
  window.addEventListener("scroll", () => {
    window.requestAnimationFrame(() => {
      window.requestAnimationFrame(() => {
        statusDiv.innerText = "doneActivating";
      });
    });
  });
  // Scroll so that #inViewport will be at the top of the viewport.
  window.scrollTo(0, initialSpacer.offsetHeight);
</script>

